<style>
    .footer.footer-home {display: none;}
    .uploadImg{overflow:hidden;}
    .uploadImg label{display:inline-block;width:3.1rem;height:3.1rem;line-height:3.1rem;text-align:center;border:1px #3facef solid;overflow:hidden;position:relative;font-size:4rem;color:#3facef;margin-right:10px;cursor:pointer;font-weight: 100 !important;float: left;}
    .uploadImg label img{position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;width:100%;height:100%;z-index:1;cursor:default;}
    .uploadImg label input[type="file"]{display:none;}
    .uploadImg label .del{position:absolute;right:0;top:0;background-color: rgba(0,0,0,0.6);font-size:1rem;line-height:normal;color:white;z-index:2;padding:2px;cursor:pointer;font-size: .6rem;}
</style>
<header>
    <a href="javascript:history.back();">
        <i class="iconfont icon-xialalan-copy"></i>
    </a>
    <span>申请退款</span>
</header>
<div class="order-container margin_bot">
    <div class="ass_box_list de_title_bottom">订单编号：<span style="width:7rem;"><?php echo $output['order_info']['order_sn'];  ?></span></div>
    <?php if($output['order_info']['order_type']==1) {?>
       <?php  foreach($output['skus'] as $sku):?>
    <div class="order-item">
        <div class="item-body flex_display">
            <div class="item-img flex-0">
                <img src="<?php echo $output['order_info']['ticket_thumb']; ?>"/>
            </div>
            <div class="item-info flex-1">
                <h1 class="p-1"><?php echo $output['order_info']['ticket_title'] ?></h1>
                <span>房型:<?php echo $output['order_info']['spec_name']; ?></span>
                <div class="item-price flex_display flex-justify">
                    <p class="color_red">￥<?php echo $sku['unit_price']; ?></p>
                    <span>×<?php echo $sku['oh_num']; ?></span>
                </div>
            </div>
        </div>
    </div>
     <?php endforeach; ?>
    <?php }elseif($output['order_info']['order_type']==2){?>
        <?php  foreach($output['skus'] as $sku):?>
        <div class="order-item">
            <div class="item-body flex_display">
                <div class="item-img flex-0">
                    <img src="<?php echo $output['order_info']['ticket_thumb']; ?>"/>
                </div>
                <div class="item-info flex-1">
                    <h1 class="p-1"><?php echo $output['order_info']['ticket_title'] ?></h1>

                    <div class="item-price flex_display flex-justify">
                        <p class="color_red">￥<?php echo $sku['ot_price']; ?></p>
                        <span>×<?php echo $sku['ot_num']; ?></span>
                    </div>
                </div>
            </div>
        </div>
            <?php endforeach; ?>
    <?php } else{?>
        <?php  foreach($output['skus'] as $sku):?>
            <div class="order-item">
                <div class="item-body flex_display">
                    <div class="item-img flex-0">
                        <img src="<?php echo $output['order_info']['ticket_thumb']; ?>"/>
                    </div>
                    <div class="item-info flex-1">
                        <h1 class="p-1"><?php echo $output['order_info']['ticket_title'] ?></h1>
                        <div class="item-price flex_display flex-justify">
                            <p class="color_red">￥<?php echo $sku['og_price']; ?></p>
                            <span>×<?php echo $sku['og_num']; ?></span>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php } ?>
</div>
<form id="refund_form" action=""  method="post">
    <input type="hidden" name="order_id" value="<?php echo $output['order_info']['order_id']; ?>">
    <input type="hidden" name="form_submit" value="ok">
    <input type="hidden" name="refund_type" value="">
<div class="order-container ass_box_list de_title_bottom">退款原因
    <b id="sele_reason">请选择<i class="rotate iconfont icon-xialalan-copy font_s"></i></b>
</div>

<div class="ass_box">
    <div class="ass_box_list de_title_bottom">
        <span>退款金额</span><span class="color_red">￥<?php echo $output['order_info']['need_pay']; ?></span>
    </div>
    <div class="ass_box_list_1 de_title_bottom">
        <span>退款说明</span>
    </div>
    <div class="ass_box_list_1 de_title_bottom">
        <input type="text" name="note" placeholder="在这填写你的退款说明哦~">
    </div>
</div>

<div class="ass_box">
    <div class="ass_box_list de_title_bottom">上传图片</div>
    <div class="ass_box_list footer_bottom order-container">
        <ul class="upload-ul clearfix">
            <div class="uploadImg fl">
                <label class="result"><input type="file" />+</label>
            </div>
        </ul>
    </div>
</div>
<a class="btn footer_1" id="sub_but" href="javascript:;">
    确认提交
</a>
</form>
<!--退货原因开始-->
<div class="return_reason_mask" style="display: none;">
    <div class="reason_box">
        <div class="reason_title">
            退款原因
        </div>
        <div class="reason_info">
            <label class="radiobox de_title_bottom">
                <input type="radio" id="addr1" name="default"/>
                <i class="iconfont icon-checkboxround0"></i>
                <span class="fr">不想要了</span>
            </label>
            <label class="radiobox de_title_bottom">
                <input type="radio" id="addr2" name="default"/>
                <i class="iconfont icon-checkboxround0"></i>
                <span class="fr">预定错了</span>
            </label>
            <label class="radiobox de_title_bottom">
                <input type="radio" id="addr2" name="default"/>
                <i class="iconfont icon-checkboxround0"></i>
                <span class="fr">其他原因</span>
            </label>
        </div>
        <a class="btn footer_1" href="javascript:;" id="close">
            关闭
        </a>
    </div>

</div>
<script>


    //原因
    $("#sele_reason").click(function () {
        $(".return_reason_mask").show();
    });
    $(".radiobox").click(function () {
        $("#sele_reason").text($(this).find('span').text());
        $("[name='refund_type']").val($(this).find('span').text());
        //$("#sele_reason").text($().find("span").text());
    });
    $("#close").click(function () {
        $(".return_reason_mask").hide();
    });

    //提交表单
    var refundForm = $("#refund_form");
    $("#sub_but").click(function(){
        if($("[name='refund_type']").val()==''){
            popAlert('退款原因不能为空');
            return false;
        }
        var _html="";
        $(".upload-img").each(function(){
            _html+="<input type='hidden' name='imgs[]' value='"+$(this).attr('src')+"'>";
        });
        $(this).parent().append(_html);
        refundForm.submit();
    })


    //上传图片
    var uploadImgMinNum = 1;
    var uploadImgMaxNum = 3;
    var showImg = document.querySelector(".uploadImg label");
    var getImg = document.querySelector(".uploadImg input[type='file']");
    if(typeof FileReader === 'undefined') {
        showImg.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        getImg.setAttribute('disabled', 'disabled');
    } else {
        getImg.addEventListener('change', readFile, false);
    }
    function readFile() {
        var _self = this;
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)) {
            alert("请上传图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            $(_self).parent().html('<img class="upload-img" src="' + this.result + '"/><span class="del iconfont" title="\u5220\u9664">X</span>');
            $(".uploadImg .del").unbind("click");
            $(".uploadImg .del").click(function() {
                $(this).parent().remove();
                uploadImgMinNum--;
                var img = $(".uploadImg input[type='file']");
                if(img.length == 0) {
                    $(".uploadImg").append("<label class='result'><input type='file'>+</label>");
                    document.querySelector(".uploadImg input[type='file']").addEventListener('change', readFile, false);
                    uploadImgMinNum++;
                }
            });
            if(uploadImgMinNum < uploadImgMaxNum) {
                $(".uploadImg").append("<label class='result'><input type='file'>+</label>");
                document.querySelector(".uploadImg input[type='file']").addEventListener('change', readFile, false);
                uploadImgMinNum++;
            }
        };
    }
</script>